<!--
 * @Author: YSM
 * @Description: 
 * @Date: 2023-07-17 11:14:39
 * @LastEditTime: 2023-07-17 16:24:49
 * @FilePath: \codestoreh:\WOKER\Demo\my_web_knowledge\my_vue2_demo\src\views\WorkTop\index.vue
-->
<template>
    <div id="app">
        <div style="width: 2300px; height: 1080px;">
            <el-amap vid="amap" :zoom="zoom" :center="center" :zoomEnable="true">
                <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :events="events"
                    >
                    </el-amap-marker>
                <el-amap-info-window :position="currentWindow.position" :content="currentWindow.content"
                    :visible="currentWindow.visible" :events="currentWindow.events">
                </el-amap-info-window>
            </el-amap>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            zoom: 5,
            center: [103.82, 36.07],
            // icon: require('../../assets/logo.png'),
            markers: [
                {
                    position: [105.82, 36.07]
                },
                {
                    position: [113.55, 37.87]
                },
                {
                    position: [115.40, 39.90]
                }
            ],
            currentWindow: {
                position: [103.82, 36.07],
                content: '',
                events: {},
                visible: false
            },
            events: {
                click: (e) => {
                    this.currentWindow.visible = false;
                    this.$nextTick(() => {
                        this.currentWindow = {
                            position: [e.target.Uh.position.lng, e.target.Uh.position.lat],
                            content: `精度: ${e.target.Uh.position.lng}, 纬度: ${e.target.Uh.position.lat}`,
                            visible: true,
                            events: {}
                        };
                        this.currentWindow.visible = true;
                    });
                }
            }
        }
    }
}
</script>
  
<style scoped></style>